搜索 K
Appearance
Twikoo 配置表情包
偶然看到其他博客的评论区配置了丰富的表情包，于是自己也折腾了下~
默认表情包
Twikoo 默认只有三套表情包：
打开配置，可以看到“表情 CDN”的配置，默认是 https://owo.imaegoo.com/owo.json：
打开这个 JSON 文件，可以看到内容是每个表情包的图片地址（共有 3 组）：
每个表情有自己的名字（text 字段），以及图片地址（icon 字段，但有些表情不是图片，而是颜文字、emoji）
寻找表情包
表情包哪里来？我们可以自己做，但这很费时费力。
建议引用其他人做好的表情包，可以去 GitHub 上找。
有网友开源了一个项目：https://github.com/2X-ercha/Twikoo-Magic ，该项目收集了很多套表情包，并且提供了对应的 JSON 文件、图片文件：
建议下载该项目（也不是很大），里面的三个文件夹比较主要：
- Class_oss：提供了各套表情包的 JSON 文件，表情包应该是上传到了网友的自建图床。
- Classification：提供了各套表情包的 JSON 文件，表情包上传到 jsDelivr。
- image：所有各套表情包的图片文件。网络不好的同学可以下载该项目后逐个观看。
这三个文件夹里，有很多的文件夹，一个文件夹就是一套表情包。例如 image 文件夹：
你也可以打开 JSON 格式的目录，复制里面的 JSON 内容。例如这是表情包「滑稽」的 JSON 文件内容：
GitHub 上还看到一个项目：https://github.com/lrhtony/BiliEmoji
B 站全表情收集，含付费表情，支持 Valine、MiniValine、Waline 等评论系统
如果你是用这些评论系统的，可以看看。
开始自定义表情包
有了表情包，接下来就是配置自己的 JSON 文件了。建议下载原始的表情包文件：https://owo.imaegoo.com/owo.json，在此基础至少增加自己的表情包。
举个例子，下面这串代码配置了 3 个我想要的「滑稽」表情包：
json
"滑稽":{
"type":"image",
"container":[
{
"text": "huaji-1",
"icon": "<img src='https://pic1.imgdb.cn/item/67b2d87bd0e0a243d4002413.jpg'>"
},
{
"text": "huaji-2",
"icon": "<img src='https://pic1.imgdb.cn/item/67b2d87bd0e0a243d4002414.jpg'>"
},
{
"text": "huaji-3",
"icon": "<img src='https://pic1.imgdb.cn/item/67b2d879d0e0a243d4002410.jpg'>"
}
]
}
然后将自己配置的表情包添加到 JSON 文件里：
就是通过这样，一套套添加自己想要的表情包即可。几个建议：
- 配置完 JSON 文件后，建议检查下 JSON 的格式是否正确
- 可以适当压缩 JSON 文件，减小文件大小，加快访问速度
- 推荐网站：在线 JSON 格式化验证工具，可以检查和压缩 JSON
Twikoo 添加表情包
先将自己的表情包 JSON 文件，上传到自己的服务器，然后配置 Twikoo 的表情包（可以用相对路径）：
然后保存配置，刷新下浏览器，查看效果。本博客评论区效果：
点击表情后，先会在评论区里显示该表情的文本，等发表后才会变成图片：
将表情包名称改为图片
默认情况下，评论区下方显示的是每套表情包的文字：
如果想将其改为图片？也是可以的。原版的 JSON 文件格式为：
JSON
"Sticker": {
"type": "image",
"container": [
....
修改后的格式为：
JSON
"<img src=\"https://expression.qjqq.cn/1/650c3f7635526.webp\" style=\"width: 30px;top: 4px;position: relative;\" title=\"bochi\">": {
"type": "image",
"container": [
.....
效果：底部的文本变成了图片
最后
最后，说几个我使用一段时间后的注意事项：
- 不建议配置太多的表情包，请求太多图片容易造成网络卡顿。
- 我的图床设置了阈值，短时间内请求太多图片会被 ban，所以我会将图片上传到其他图床。如果你有做类似的防护措施，这点要注意。
- 我的更新表情包工作流：修改 JSON → 检查并压缩 → 重新上传到服务器 → 更新 CDN → 检查评论区是否生效
参考
- Twikoo 添加自定义表情包 | Mo 的记事簿
- Twikoo 表情合集(一) | 青桔气球
- 批量替换旧的 Twikoo 表情包地址，修复旧的 jsdelivr 链接 | 张洪 Heo
- 自制‘贴纸波奇’表情包！ - 丝提的小站：感谢作者制作的波奇表情包
- 推一版 Blobcats - 龙星划空：好看的动态猫猫表情包